// 租车保障
<template>
  <div class="car-ensure">
    <van-cell-group class="cell-container">
      <van-cell title="租车保障服务" />
      <van-cell class="first">
        <template #title>
          <span>基本保障服务费</span>
          <span>￥80</span>
          <span>/天</span>
        </template>
        <template #default>
          <span>￥{{80*day}}</span>
          <span>已含</span>
        </template>
      </van-cell>
      <van-cell>
        <template #title>
          <span>车损无忧服务</span>
          <span>￥50</span>
          <span>/天</span>
        </template>
        <template #default>
          <span>￥{{oneTotalPrice}}</span>
          <van-switch
            v-model="oneChecked"
            @change="oneChange"
            size="22"
            active-color="#cf6a87"
            inactive-color="#dcdee0"
          />
        </template>
      </van-cell>
      <van-cell>
        <template #title>
          <span>安心出行服务包</span>
          <span>￥24</span>
          <span>/天</span>
        </template>
        <template #default>
          <span>￥{{twoTotalPrice}}</span>
          <van-switch
            v-model="twoChecked"
            @change="twoChange"
            size="22"
            active-color="#cf6a87"
            inactive-color="#dcdee0"
          />
        </template>
      </van-cell>
      <van-cell>
        <template #title>
          <span> 三者责任险补充服务 </span>
          <span>￥28</span>
          <span>/天</span>
        </template>
        <template #default>
          <span>￥{{threeTotalPrice}}</span>
          <van-switch
            v-model="threeChecked"
            @change="threeChange"
            size="22"
            active-color="#cf6a87"
            inactive-color="#dcdee0"
          />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: "CarEnsure",
  data() {
    return {
      // 分别为控制第一二三个开关
      oneChecked: false,
      twoChecked: false,
      threeChecked: false,
      // 点击开关显示的总价格，单价*天数
      oneTotalPrice: 0, //车损无忧服务总价
      twoTotalPrice: 0, // 安心出行总价
      threeTotalPrice: 0, // 三者责任险补充服务总价
    };
  },
  computed: {
    // 车辆保险服务总价
     carEnsureTotalPrice() {
       return this.oneTotalPrice + this.twoTotalPrice + this.threeTotalPrice
     },
    day () {
      return parseInt(this.$store.state.address.timeDistance)
    }
  }, 
  methods: {
    // 点击第一个开关触发
    oneChange() {
      if (this.oneChecked) {
        this.oneTotalPrice = 50 * this.day
      } else {
        this.oneTotalPrice = 0
      }
      this.$emit("change",this.carEnsureTotalPrice)
    },
    // 点击第二个开关触发
    twoChange() {
      if (this.twoChecked) {
        this.twoTotalPrice = 24 * this.day
      } else {
        this.twoTotalPrice = 0
      }
      this.$emit("change",this.carEnsureTotalPrice)
    },
    // 点击第三个开关触发
    threeChange() {
      if (this.threeChecked) {
        this.threeTotalPrice = 28 * this.day
      } else {
        this.threeTotalPrice = 0
      }
      this.$emit("change",this.carEnsureTotalPrice)
    }
  },
};
</script>

<style lang="scss" scoped>
.car-ensure {
  .cell-container {
    .van-cell {
      .van-cell__title {
        flex: 6;
        span:nth-child(2) {
          font-size: 10px;
          color: #b2b2b2;
          margin-left: 2px;
        }
        span:nth-child(3) {
          font-size: 12px;
          color: #b2b2b2;
        }
      }
      .van-cell__value {
        flex: 4;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        span {
          font-size: 14px;
          color: #ff3838;
        }
        .van-switch {
          margin-left: 20px;
        }
      }
    }
    .van-cell.first {
      .van-cell__title {
        span:nth-child(2) {
          font-size: 10px;
          color: #b2b2b2;
          margin-left: 2px;
        }
        span:nth-child(3) {
          font-size: 12px;
          color: #b2b2b2;
        }
      }
      .van-cell__value {
        span:nth-child(1) {
          font-size: 14px;
          color: #ff3838;
        }
        span:nth-child(2) {
          font-size: 14px;
          color: #ff3838;
          margin-left: 22px;
        }
      }
    }
  }
}
</style>